<template>
    <div class="ZhuanJi col3" @click="gedanxiangqing(item.id)">
        <div>
            <img :src="`${item?.picUrl}?imageView=1&type=webp&thumbnail=246x0`" alt="">
            <span></span>
        </div>
        <div class="text">{{ item.name }}</div>
        <span class="redu"><span><img src="../assets/erjiicon.svg" alt="">{{ item.playCount | formatNumber }} </span>
        </span>
    </div>
</template>

<script>
export default {
    props: {
        item: Object,
        name: String,
    },
    data() {
        return {

        }
    },
    created() {
        console.log(this.item);
    },
    methods: {

        gedanxiangqing(id) {
            this.$router.push({
                path: '/gedanxiangqing',
                query: {
                    id
                }
            })
        }
    }

}

</script>

<style lang="less" scoped>
.ZhuanJi {
    list-style: none;
    flex-grow: 1;
    // margin-top: 3px;
    margin-bottom: 3px;
    position: relative;

    .img {
        position: relative;

        img {
            width: 100%;
            display: block;
        }

        span {
            position: absolute;
            top: 0;
            right: 0;
            color: white;
        }
    }

    .redu {
        position: absolute;
        right: 0;
        top: 0;
        color: aliceblue;
        // font-weight: 700;
        display: flex;
        text-shadow: 2px 2px 4px #000;

        span {
            display: flex;
            align-items: center;
        }

        img {
            width: 18px;
            height: 18px;
        }
    }

    &.col3 {
        width: 30%;

        &:nth-child(3n + 2) {
            // outline: 5px solid red;
            margin-left: 3px;
            margin-right: 3px;
        }
    }

    &.col2 {
        width: 40%;
    }

    .text {
        font-size: 14px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
}
</style>